<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
  props: {
    // 让外界传入是否实时监听的变量
    probeType: {
      type: Number,
      default: 0
    },
    pullUpLoad: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      bs: null
    }
  },
  mounted () {
    // 1-创建bs对象, TODO: 这里通过ref获取wrapper元素, 唯一值
    this.bs = new BScroll(this.$refs.wrapper, {
      // TODO: 动态开启实时监听滚动位置
      probeType: this.probeType,
      // TODO: 动态开启下拉加载更多(如果开启上拉加载更多, 则会一直触发scroll事件)
      pullUpLoad: this.pullUpLoad,
      // 开启元素事件监听
      click: true
      // 如果better-scroll中包含有其他vue组件,需要加上 observeDOM 这个属性, 为true才能使用, 这个属性不太好用, 还是会有滚动bug产生
      // observeDOM: true
    })

    //  TODO: 监听滚动位置, 判断一下
    if (this.probeType === 2 || this.probeType === 3) {
      this.bs.on('scroll', (position) => {
        // console.log(position)
        // 将监听到的滚动信息发送出去, 谁想用就调
        this.$emit('scroll', position)
      })
    }
    // console.log(this.bs)
    // TODO: 上拉加载更多 判断一下
    if (this.pullUpLoad) {
      this.bs.on('pullingUp', () => {
        // console.log('上拉加载更多')
        // 将上拉加载更多的方法传递出去
        this.$emit('pullingUp')
      })
    }
  },
  methods: {
    // 封装好返回顶部方法, 外部直接调用
    scrollTo (x, y, time = 500) {
      this.bs && this.bs.scrollTo(x, y, time)
    },
    // 封装重新开启上拉加载更多
    finishPullUp () {
      this.bs && this.bs.finishPullUp()
    },
    // 封装重新计算高度函数
    refresh () {
      this.bs && this.bs.refresh()
      console.log('高度已更新')
    },
    // 获取滚动高度方法
    getCurrentY () {
      return this.bs && this.bs.y ? this.bs.y : 0
    }
  },
  components: {}
}
</script>

<style lang="less" scoped>
</style>
